<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<html> 
	<head> 
		<title>sync to phone</title>
		<link rel="stylesheet" href="css-js/jquery.mobile-1.0b1.min.css" />	
		<script src="css-js/jquery-1.6.1.min.js"></script>
		<script src="css-js/jquery.mobile-1.0b1.min.js"></script>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>YOUR SELECTS</h1>
				<a id="btnFreshSelects" data-icon="refresh" class="ui-btn-left" 
			href="javascript:refeshSelects();return false;" data-role="button" data-inline="true">Refresh</a>
			</div><!-- /header -->
			<!--  Progress -->
			<div data-role="header" id="hdrProgress" data-nobackbtn="true"  data-theme="c">
				<h1>Processing...</h1>
			</div>	
			<div data-role="content" id="contentProgress"  data-theme="c">
				<div align="CENTER"><h4>Please wait.</h4></div>
				<div align="CENTER"><img id="spin" src="img/wait.gif"/></div>	
			</div>	
			<div data-role="footer" id="ftrProgress"  data-theme="c"></div>
			<!-- Selects -->
			<div data-role="content" id="contentList">	
				<ul data-role="listview" data-dividertheme="c" id="selects"></ul>
			</div><!-- /content -->
		
			<div data-role="footer" id="ftrList"></div><!-- /footer -->
		</div><!-- /page -->
		<script>
			var selects;
			
			var hdrListVar;
			var contentListVar;
			var ftrListVar;
			var hdrProgressVar;
			var contentProgressVar;
			var ftrProgressVar;
		
			$(document).ready(function () {
				selects = $("#selects");
				contentListVar = $('#contentList');
				ftrListVar = $('#ftrList');
				hdrProgressVar = $('#hdrProgress');
				contentProgressVar = $('#contentProgress');
				ftrProgressVar = $('#ftrProgress');
				
				//selectSupport.showLog("ddd","ready");
				showProgress();
				selectSupport.getAllSelects('setSelectsList','showAccount');
				//setSelectsList('{"selects":[{"url": "http://www.google.com/", "text": ""}]}');
			});
			
			function showProgress(){
				hideList();
				hdrProgressVar.show();
				contentProgressVar.show();
				ftrProgressVar.show();
			}
			
			function hideProgress(){
				hdrProgressVar.hide();
				contentProgressVar.hide();
				ftrProgressVar.hide();
				showList();
			}
			
			function hideList(){
				contentListVar.hide();
				ftrListVar.hide();   
			}
			
			function showList(){
				contentListVar.show();
				ftrListVar.show(); 
			}
			
			function setSelectsList(jsonText){
				var tmpJson = $.parseJSON(jsonText);
				if(tmpJson != null && tmpJson.selects != null){
					var tmpSelects = tmpJson.selects;
					
					for(i = 0; i < tmpSelects.length; i++){
						var tmpId = tmpSelects[i].id;
						var tmpIdFragment = '<li data-role="list-divider">'+tmpId+'</li>';
						selects.append(tmpIdFragment);
						var tmpText = tmpSelects[i].text;
						var tmpUrl = tmpSelects[i].url;
						var tmpFragment
						if(!isEmpty(tmpText)){
							tmpFragment = '<li><a href="javascript:showContact(' + tmpId + ');return false;">'+tmpText+'</a></li>';
						}
						else{
							tmpFragment = '<li><a href="javascript:showContact(' + tmpId + ');return false;">'+tmpUrl+'</a></li>';
						}
						
						selects.append(tmpFragment);
						
						/*var tmpValues = (tmpSelects[i]).values;
						if(tmpValues != null){
							var j;
							for(j = 0; j < tmpValues.length; j++){
								var tmpDisplayName = tmpValues[j].displayName;
								var tmpContactId = tmpValues[j].contactId;					
								var tmpLiFragment = '<li><a href="javascript:showContact(' + tmpContactId + ');return false;">'+tmpDisplayName+'</a></li>';
								contactSelectionsVar.append(tmpLiFragment);
							}
						}*/		
					}
				}	
				selects.listview('refresh'); 
				hideProgress();
			}
			
			function refeshSelects(){
				selects.empty();
				showProgress();
				selectSupport.getAllSelects('setSelectsList','showAccount');
			}
			
			function isEmpty( inputStr ) { if ( null == inputStr || "" == inputStr ) { return true; } return false; }
		</script>
	</body>
</html>